import * as React from 'react';
import Avatar from 'antd/es/avatar';
import { NavLink } from 'react-router-dom';
import './settingItem.less';
import { IconImgEdit } from '../iconImage/IconImageEdit';
import SvgIcon from '../svgIcon/SvgIcon';
export interface ISettingItemProps {
	name: string;
	urlKey?: string;
	iconName:string;
	exactName?: string;
	selected?:boolean
	onClick?: () => void;
}

export function SettingItem(props: ISettingItemProps) {
	return (
		<div className={`setting-item ${props.selected?'setting-item-selected':''}`} onClick={props.onClick}>
			<div className = "item-wrap">
				{/* <Avatar size={24} icon="user" src={props.img} className="avatar" /> */}
				<SvgIcon name={props.iconName} size='12' />
				<span className="item-right">
					<span className="name notranslate">{props.name}</span>
					<span style={props.exactName ? {} : { display: 'none' }} className="exact-text notranslate">
						{props.exactName}
					</span>
					{/* <span>
						<IconImgEdit img={require('../../assets/image/right-icon.png')} size={12} marginSize={4} />
					</span> */}
				</span>
			</div>
		</div>
	);
}
